.authorbox{
    @include flexbox(row, wrap, flex-start, flex-start);
    @include shadow(1);
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    background: white;
    
    .avatar {
        padding-right: 20px;
        max-width: $avatar-width;

        img{
            border-radius: 50em;
        }

        @media screen and (max-width: $authorbox-collapse){
            @include center();
            padding-right: 0;
        }
    }

    .info{
        $avatar: $avatar-width + 20px; // 20px being the right padding of the avatar container

        @include flexbox(row, wrap, flex-start,flex-start);
        width: 100%;

        @media screen and (min-width: $authorbox-collapse + 1){
            width: calc(100% - #{$avatar} );
            height: 100%;
        }

        .author-name,
        .bio,
        .social{
            width: 100%;
        }

        .social{
            align-self: flex-end;
            letter-spacing: 6px;
        }
    }
}